<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel">
    <template slot="title">
      <span v-if="type===1">举报详情</span>
      <span v-if="type===2">{{rowData.type==4?'忽略详情':'禁言详情'}}</span>
    </template>
    <div class="ban-content" v-if="rowData.type!=4&&type==2">
      <p>被禁言会员账号：{{banTimeData.target_account}}</p>
      <p>被禁言会员昵称：{{banTimeData.target_nick}}</p>
      <div class="line"></div>
      <p>禁言操作人：{{banTimeData.ban_info?banTimeData.ban_info.ban_account:banTimeData.account}}</p>
      <p>禁言时长：{{banTimeData.ban_info?banTimeData.ban_info.ttl_text:banTimeData.ttl_text}}</p>
      <p>禁言开始时间：{{banTimeData.ban_info?banTimeData.ban_info.time:banTimeData.time}}</p>
      <p>禁言结束时间：{{banTimeData.ban_info?banTimeData.ban_info.expire:banTimeData.show_time}}</p>
      <p>禁言类别：{{banTimeData.ban_info?banTimeData.ban_info.cate:banTimeData.cate}}</p>
      <p>禁言备注：{{banTimeData.ban_info?banTimeData.ban_info.remark:banTimeData.remark}}</p>

      <div class="line"></div>
      <div v-if="rowData.type==2||rowData.type==3">
         <p>解禁操作人：{{banTimeData.account}}</p>
        <p>解禁时间：{{banTimeData.type==2?banTimeData.time:banTimeData.show_time}}</p>
        <p>解禁备注：{{banTimeData.remark}}</p>
      </div>

    </div>
    <div v-if="rowData.type==4">
       <p>被举报会员账号：{{banTimeData.target_account}}</p>
      <p>被举报会员昵称：{{banTimeData.target_nick}}</p>
      <div class="line"></div>
       <p>忽略操作人：{{banTimeData.account}}</p>
      <p>忽略备注：{{banTimeData.remark}}</p>
    </div>
      <div v-if="type===2" class="header">
        举报详情
      </div>
      <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column label="被举报内容" prop="msg_body" align="center">
      </el-table-column>
      <el-table-column label="赛事房间" prop="room" align="center">
      </el-table-column>
      <el-table-column label="发送时间" prop="msg_time" align="center">
      </el-table-column>
      <el-table-column label="举报人数" prop="report_count" align="center">
      </el-table-column>
      <el-table-column label="举报类别" prop="cate" align="center">
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
  </el-dialog>

</template>

<script>

import { form, grid } from '@/build';
import { getReportDetailList, getHistoryDetail } from '@/services/api/chatRoom';

export default {
  name: 'detail-dialog',
  props: {
    dialogVisible: {
      required: true,
    },
    rowData: {
      required: true,
    },
    type: { // 可选字段，有默认值 默认只看举报详情
      default: 1,
    },

  },
  mixins: [form, grid],
  data() {
    return {
      filters: {
        target_uid: this.rowData.target_uid,
        target_type: this.rowData.target_type,
        page: 1,
        size: 20,
      },
      tableData: [],
      banTimeData: {},
    };
  },
  mounted() {
    this.bindGet(getReportDetailList, 'tableData', {
      action: 'getGrid',
      sendingData: this.filters,
    });
    if (this.type !== 1) {
      this.bindGet(getHistoryDetail, 'banTimeData', {
        action: 'getHistoryDetail',
        sendingData: { id: this.rowData.id },
        afterSuccess: () => {

        },
      });
    }
    this.getAll();
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
  },

};
</script>

<style lang="scss" scoped>
 .header{
   padding: 20px 10px 20px 0;
   font-weight: bold;
 }
.ban-content{
  margin-top:-20px;
 }
 .line{
   height:1px;background: #ebeef5;margin:15px 0;
 }

</style>
